@use 'sass:math';
@use '../../../token/color/brand' as brand;
@use '../../../token/colors' as colors;
@use '../../../token/fonts' as fonts;

$jhlite-button-color-background: brand.$jhlite-color-brand-600;
$jhlite-button-color-text: colors.$jhlite-global-color-text-light;
$jhlite-button-hover-color-background: brand.$jhlite-color-brand-700;
$jhlite-button-focus-color-outline: rgba($jhlite-button-color-background, 50%);
$jhlite-button-disabled-color-background: rgba($jhlite-button-color-background, 50%);
$jhlite-button-disabled-color-text: rgba($jhlite-button-color-text, 50%);
$jhlite-button-padding: math.div(9, 16) * 1rem math.div(17, 16) * 1rem;
$jhlite-small-button-padding: 0.1rem 0.5rem;
$jhlite-button-radius: math.div(6, 16) * 1rem;
$jhlite-button-line-height: 1.5rem !default;
$jhlite-button-font-family: fonts.$jhlite-global-font-primary-family;
$jhlite-button-font-size: 1rem !default;
$jhlite-button-font-weight: fonts.$jhlite-font-weight-semi-bold;

%jhlite-button-main {
  box-sizing: border-box;
  border: 0;
  border-radius: $jhlite-button-radius;
  background-color: $jhlite-button-color-background;
  cursor: pointer;
  padding: $jhlite-button-padding;
  text-align: center;
  text-transform: uppercase;
  line-height: $jhlite-button-line-height;
  color: $jhlite-button-color-text;
  font-family: $jhlite-button-font-family;
  font-size: $jhlite-button-font-size;
  font-weight: $jhlite-button-font-weight;

  &:hover {
    background-color: $jhlite-button-hover-color-background;
  }

  &:disabled {
    background-color: $jhlite-button-disabled-color-background;
    cursor: not-allowed;
    color: $jhlite-button-disabled-color-text;
  }

  &.-block {
    display: block;
    width: 100%;
  }

  &.-small {
    padding: $jhlite-small-button-padding;
  }

  &.-rounded-top {
    border-radius: $jhlite-button-radius $jhlite-button-radius 0 0;
  }
}

.jhlite-button-main {
  @extend %jhlite-button-main;
}
